<template>
	<view class="container">
		<!-- 编辑器内容@focus="modeShow" -->
		<view class="main">
			<editor @statuschange="selected" class="myEditor" placeholder="写点什么儿~" show-img-size show-img-toolbar
				show-img-resize @ready="onEditorReady"></editor>
		</view>

		<!-- 模块 -->
		<view class="modes" v-show="mode">
			<!-- 功能选项  :style="{position: 'relative',bottom:keyboardHeight+'px'}"-->
			<view class="tabName" @click="ontabtap">
				<image @click="changeFont" v-show="!font" src="../../static/font.png" :data-current="1" mode=""></image>
				<image @click="changeFont" v-show="font" src="../../static/fontselect.png" :data-current="1" mode="">
				</image>
				<image @click="changeAlign" v-show="!align" src="../../static/leftcenter.png" :data-current="2" mode="">
				</image>
				<image @click="changeAlign" v-show="align" src="../../static/leftcenterSelect.png" :data-current="2"
					mode=""></image>
				<image @click="changeImg" v-show="!img" src="../../static/img.png" :data-current="3" mode=""></image>
				<image @click="changeImg" v-show="img" src="../../static/imgselect.png" :data-current="3" mode="">
				</image>
				<image @click="repeal" src="../../static/backone.png" mode=""></image>
				<image @click="recover" src="../../static/afterone.png" mode=""></image>
				<image @click="modeShow" src="../../static/keyboard.png" mode=""></image>
			</view>
			<!-- 功能选项内容 -->
			<view class="tab_card" v-show="tabIndex==1 && font==true">
				<!-- 其他 -->
				<view class="one">
					<view @click="addBold" class="oneitem" :style="Bold?'background-color: #ffffff;':''">
						<image src="../../static/bold.png" mode=""></image>
					</view>
					<view @click="bias" class="oneitem" :style="slash?'background-color: #ffffff;':''">
						<image src="../../static/incline.png" mode=""></image>
					</view>
					<view @click="addDivider" class="oneitem" :style="halvingline?'background-color: #ffffff;':''">
						<image src="../../static/halvingline.png" mode=""></image>
					</view>
				</view>
				<!-- H2 -->
				<view class="one">
					<view @click="Hfirst" class="oneitem" :style="H1?'background-color: #ffffff;':''">
						<image src="../../static/h-1.png" mode=""></image>
					</view>
					<view @click="Htwo" class="oneitem" :style="H2?'background-color: #ffffff;':''">
						<image src="../../static/h-2.png" mode=""></image>
					</view>
					<view @click="Hthree" class="oneitem" :style="H3?'background-color: #ffffff;':''">
						<image src="../../static/h-3.png" mode=""></image>
					</view>
					<view @click="Hfour" class="oneitem" :style="H4?'background-color: #ffffff;':''">
						<image src="../../static/h-4.png" mode=""></image>
					</view>
				</view>
				<!-- 字号 单位px-->
				<view class="three">
					<view @click="thirtySix" class="threeitem" :style="thirtysix?'background-color: #ffffff;':''">
						<text style="font-weight: 700;font-size: 38upx;">36</text>
					</view>
					<view @click="thirtyTwo" class="threeitem" :style="thirtytwo?'background-color: #ffffff;':''">
						<text style="font-weight: 600;font-size: 36upx;">32</text>
					</view>
					<view @click="twentyEight" class="threeitem" :style="twentyeight?'background-color: #ffffff;':''">
						<text style="font-size: 34upx;">28</text>
					</view>
					<view @click="twentySix" class="threeitem" :style="twentysix?'background-color: #ffffff;':''">
						<text style="font-size: 32upx;">26</text>
					</view>
					<view @click="twentyFour" class="threeitem" :style="twentyfour?'background-color: #ffffff;':''">
						<text style="font-size: 28upx;">24</text>
					</view>
					<view @click="Twenty" class="threeitem" :style="twenty?'background-color: #ffffff;':''">
						<text style="font-size: 26upx;">20</text>
					</view>
				</view>
				<!-- 字体颜色 -->
				<view class="four">
					<view @click="Black" class="fouritema" :style="black?'border: 4upx solid black;':''">
						<text></text>
					</view>
					<view @click="Red" class="fouritemb" :style="red?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Gray" class="fouritemc" :style="gray?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Blue" class="fouritemd" :style="blue?'border: 4upx solid #55aaff;':''">
						<text></text>
					</view>
					<view @click="Orange" class="fouriteme" :style="orange?'border: 4upx solid orange;':''">
						<text></text>
					</view>
					<view @click="Green" class="fouritemf" :style="green?'border: 4upx solid green;':''">
						<text></text>
					</view>
				</view>
			</view>
			<view class="tab_card" v-show="tabIndex==2 && align==true">
				<!-- 对齐方式 -->
				<view class="one">
					<view class="oneitem" @click="alignLeft" :style="leftcenter?'background-color: #ffffff;':''">
						<image src="../../static/leftcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignCenter" :style="center?'background-color: #ffffff;':''">
						<image src="../../static/center.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignright" :style="rightcenter?'background-color: #ffffff;':''">
						<image src="../../static/rightcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Sort" :style="underline?'background-color: #ffffff;':''">
						<image src="../../static/underline.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Refine" :style="refine?'background-color: #ffffff;':''">
						<image src="../../static/dot.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Check" :style="check?'background-color: #ffffff;':''">
						<image src="../../static/addrefine.png" mode=""></image>
					</view>
				</view>
				<view class="two">
					<view class="twoitem">
						<image src="../../static/lineheight.png" mode=""></image>
					</view>
					<view @click="lineHeightone" class="twoitem" :style="heightone?'background-color: #ffffff;':''">
						<text>1</text>
					</view>
					<view @click="lineHeightonea" class="twoitem" :style="heightonea?'background-color: #ffffff;':''">
						<text>1.5</text>
					</view>
					<view @click="lineHeighttwo" class="twoitem" :style="heighttwo?'background-color: #ffffff;':''">
						<text>2</text>
					</view>
					<view @click="lineHeighttwoa" class="twoitem" :style="heighttwoa?'background-color: #ffffff;':''">
						<text>2.5</text>
					</view>
					<view @click="lineHeightthree" class="twoitem" :style="heightthree?'background-color: #ffffff;':''">
						<text>3</text>
					</view>
				</view>

				<!-- 背景色 -->
				<view class="fours">
					<view @click="Blackback" class="foursitema" :style="blackback?'border: 4upx solid black;':''">
						<text></text>
					</view>
					<view @click="Redback" class="foursitemb" :style="redback?'border: 4upx solid red;':''">
						<text></text>
					</view>
					<view @click="Grayback" class="foursitemc" :style="grayback?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Blueback" class="foursitemd" :style="blueback?'border: 4upx solid #55aaff;':''">
						<text></text>
					</view>
					<view @click="Orangeback" class="foursiteme" :style="orangeback?'border: 4upx solid orange;':''">
						<text></text>
					</view>
					<view @click="Green" class="foursitemf" :style="greenback?'border: 4upx solid green;':''">
						<text></text>
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view class="tab_cardimg" v-show="tabIndex==3 && img==true">
				<view class="mo">
					<view class="moitem" @click="insertImg">
						<image src="../../static/img.png" mode=""></image>
						<text>来自图库</text>
					</view>
					<!-- <view class="moitem">
						<image src="../../static/photograph.png" mode=""></image>
						<text>拍照</text>
					</view> -->
					<view class="moitem" @click="insertVideo">
						<image src="../../static/insertvideo.png" mode=""></image>
						<text>插入视频</text>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: true, //显示模块
				tabIndex: 1, //下标
				Height: 0, //高度
				font: true, //字体选项卡
				align: false, //对齐方式选项卡
				img: false, //图片选项卡
				halvingline: false, //下划线
				slash: false, //倾斜
				Bold: false, //变量
				H1: false, //H1
				H2: false, //H2
				H3: false, //H3
				H4: false, //H4
				thirtysix: false, //36字号px
				thirtytwo: false, //32字号px
				twentyeight: false, //28字号px
				twentysix: false, //26字号px
				twentyfour: false, //24字号px
				twenty: false, //20字号px
				black: true, //黑色字体
				red: false, //红色字体
				gray: false, //灰蓝色字体
				blue: false, //浅蓝色字体
				orange: false, //橙色字体
				green: false, //绿色字体
				blackback: true, //黑色背景
				redback: false, //红色字体
				grayback: false, //灰蓝色字体
				blueback: false, //浅蓝色字体
				orangeback: false, //橙色字体
				greenback: false, //绿色字体
				center: false, //居中
				leftcenter: false, //居左
				rightcenter: false, //居右
				underline: false, //排序
				refine: false, //加圆点
				check: false, //加方格
				spacingone:false,//字母间距1
				heightone:false,//行高1
				heightonea:false,//行高1.5
				heighttwo:false,//行高2
				heighttwoa:false,//行高2.5
				heightthree:false,//行高3
				editorCtx: {},
				//键盘高度
				keyboardHeight: 0,
			}
		},
		mounted() {
			// uni.onKeyboardHeightChange((obj) => {
			// 	console.log(obj)
			// 	// this.keyboardHeight = obj
			// 	// 获取系统信息
			// 	let _sysInfo = uni.getSystemInfoSync();
			// 	let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
			// 	let _diff = obj.height - _heightDiff
			// 	// 键盘高度
			// 	const height = (_diff > 0 ? _diff : 0) - 2 + "px";
			// 	this.keyboardHeight = height
			// })
		},
		methods: {
			modeShow() { //
				this.mode = !this.mode

				//  监听键盘高度变化
				uni.onKeyboardHeightChange((obj) => {
					console.log(obj)
					//this.keyboardHeight = obj
					// 获取系统信息
					//let _sysInfo = uni.getSystemInfoSync();
					// let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					// let _diff = obj.height - _heightDiff
					// // 键盘高度
					// const height = (_diff > 0 ? _diff : 0) - 2 + "px";
					//this.keyboardHeight = height
					// console.log(height)
				})

			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);

				this.tabIndex = index;
				console.log(index)

			},
			switchTab(index) {
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index;
			},
			onEditorReady() { //初始化
				uni.createSelectorQuery().in(this).select('.myEditor').fields({
					context: true
				}, res => {
					//console.log(res.context);
					this.editorCtx = res.context
				}).exec()
			},
			changeFont() { //字体选项卡
				this.font = !this.font
				this.align = false
				this.img = false
			},
			changeAlign() { //对齐方式选项卡
				this.align = !this.align
				this.font = false
				this.img = false
			},
			changeImg() { //图片选项卡 
				this.img = !this.img
				this.font = false
				this.align = false
			},
			addDivider() { //插入分割线 halvingline
				this.halvingline = !this.halvingline //改变图标颜色
				this.editorCtx.insertDivider()
				this.editorCtx.getContents()
			},
			repeal() { //撤销
				this.editorCtx.undo()
			},
			recover() { //恢复
				this.editorCtx.redo()
			},
			addBold() { //字体加粗
				this.Bold = !this.Bold //变量
				this.editorCtx.format('bold', 'bold')
			},
			bias() { //字体倾斜
				this.slash = !this.slash //改变图标颜色
				this.editorCtx.format('italic')
			},
			alignCenter() { //居中对齐
				this.center = !this.center //改变图标颜色
				this.leftcenter = false //改变图标颜色
				this.rightcenter = false //改变图标颜色
				this.editorCtx.format('align', 'center') //属性，值
			},
			alignLeft() { //居左对齐
				this.leftcenter = !this.leftcenter //改变图标颜色
				this.center = false //改变图标颜色
				this.rightcenter = false //改变图标颜色
				this.editorCtx.format('align', 'left') //属性，值
			},
			alignright() { //居右对齐
				this.rightcenter = !this.rightcenter //改变图标颜色
				this.center = false //改变图标颜色
				this.leftcenter = false //改变图标颜色
				this.editorCtx.format('align', 'right') //属性，值
			},
			Sort() { //排序
				this.underline = !this.underline //改变图标颜色
				this.editorCtx.format('list', 'ordered') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Refine() { //加圆点
				this.refine = !this.refine //改变图标颜色
				this.editorCtx.format('list', 'bullet') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Check() { //加方格
				this.check = !this.check //改变图标颜色
				this.editorCtx.format('list', 'check') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Hfirst() { //标题字体变大
				this.H1 = !this.H1
				if (this.H1) {
					this.editorCtx.format('header', 'H1')
				} else if (!this.H1) {
					this.editorCtx.format('header', '0')
				}
			},
			Htwo() { //标题字体变大
				this.H2 = !this.H2
				if (this.H2) {
					this.editorCtx.format('header', 'H2')
				} else if (!this.H2) {
					this.editorCtx.format('header', '0')
				}
			},
			Hthree() { //标题字体变大
				this.H3 = !this.H3
				if (this.H3) {
					this.editorCtx.format('header', 'H3')
				} else if (!this.H3) {
					this.editorCtx.format('header', '0')
				}
			},
			Hfour() { //标题字体变大
				this.H4 = !this.H4
				if (this.H4) {
					this.editorCtx.format('header', 'H4')
				} else if (!this.H4) {
					this.editorCtx.format('header', '0')
				}
			},
			thirtySix() { //36
				this.thirtysix = !this.thirtysix
				if (this.thirtysix) {
					this.editorCtx.format('fontSize', '36px')
				} else if (!this.thirtysix) {
					this.editorCtx.format('fontSize', '')
				}
			},
			thirtyTwo() { //32
				this.thirtytwo = !this.thirtytwo
				if (this.thirtytwo) {
					this.editorCtx.format('fontSize', '32px')
				} else if (!this.thirtytwo) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentyEight() { //28
				this.twentyeight = !this.twentyeight
				if (this.twentyeight) {
					this.editorCtx.format('fontSize', '28px')
				} else if (!this.twentyeight) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentySix() { //26
				this.twentysix = !this.twentysix
				if (this.twentysix) {
					this.editorCtx.format('fontSize', '26px')
				} else if (!this.twentysix) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentyFour() { //24
				this.twentyfour = !this.twentyfour
				if (this.twentyfour) {
					this.editorCtx.format('fontSize', '24px')
				} else if (!this.twentyfour) {
					this.editorCtx.format('fontSize', '')
				}
			},
			Twenty() { //20
				this.twenty = !this.twenty
				if (this.twenty) {
					this.editorCtx.format('fontSize', '20px')
				} else if (!this.twenty) {
					this.editorCtx.format('fontSize', '')
				}
			},
			spacingOne(){//字母间距1
				this.spacingone = !this.spacingone
				if (this.spacingone) {
					this.editorCtx.format('letterSpacing', '100px')
				} else if (!this.spacingone) {
					this.editorCtx.format('letterSpacing', '')
				}
			},
			lineHeightone(){//行高1
				this.heightone = !this.heightone
				if (this.heightone) {
					this.editorCtx.format('lineHeight', '20px')//20upx
				} else if (!this.heightone) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeightonea(){//行高1.5
				this.heightonea = !this.heightonea
				// 当点击1.5时取消其他行高 根据需求自行更改 其他功能同理
				this.heightone =false
				this.heighttwo =false
				this.heighttwoa =false
				this.heightthree =false
				if (this.heightonea) {
					this.editorCtx.format('lineHeight', '30px')//20upx
				} else if (!this.heightonea) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeighttwo(){//行高2
				this.heighttwo = !this.heighttwo
				if (this.heighttwo) {
					this.editorCtx.format('lineHeight', '40px')//20upx
				} else if (!this.heighttwo) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeighttwoa(){//行高2.5
				this.heighttwoa = !this.heighttwoa
				if (this.heighttwoa) {
					this.editorCtx.format('lineHeight', '50px')//50upx
				} else if (!this.heighttwoa) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeightthree(){//行高3
				this.heightthree = !this.heightthree
				if (this.heightthree) {
					this.editorCtx.format('lineHeight', '60px')//50upx
				} else if (!this.heightthree) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			Black() { //黑色字体
				this.black = !this.black
				if (this.black) {
					this.editorCtx.format('color', 'black')
				} else if (!this.black) {
					this.editorCtx.format('color', '')
				}
			},
			Red() { //黑色字体
				this.red = !this.red
				if (this.red) {
					this.editorCtx.format('color', 'red')
				} else if (!this.red) {
					this.editorCtx.format('color', '')
				}
			},
			Gray() { //灰蓝色字体
				this.gray = !this.gray
				if (this.gray) {
					this.editorCtx.format('color', '#92a5c7')
				} else if (!this.gray) {
					this.editorCtx.format('color', '')
				}
			},
			Blue() { //浅蓝色字体
				this.blue = !this.blue
				if (this.blue) {
					this.editorCtx.format('color', '#00aaff')
				} else if (!this.blue) {
					this.editorCtx.format('color', '')
				}
			},
			Orange() { //橙色字体
				this.orange = !this.orange
				if (this.orange) {
					this.editorCtx.format('color', 'orange')
				} else if (!this.orange) {
					this.editorCtx.format('color', '')
				}
			},
			Green() { //绿色字体
				this.green = !this.green
				if (this.green) {
					this.editorCtx.format('color', 'green')
				} else if (!this.green) {
					this.editorCtx.format('color', '')
				}
			},
			Blackback() { //黑色背景
				this.blackback = !this.blackback
				if (this.blackback) {
					this.editorCtx.format('backgroundColor', 'black')
				} else if (!this.blackback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Redback() { //黑色背景
				this.redback = !this.redback
				if (this.redback) {
					this.editorCtx.format('backgroundColor', 'red')
				} else if (!this.redback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Grayback() { //灰蓝色背景
				this.grayback = !this.grayback
				if (this.grayback) {
					this.editorCtx.format('backgroundColor', '#92a5c7')
				} else if (!this.grayback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Blueback() { //浅蓝色字体
				this.blueback = !this.blueback
				if (this.blueback) {
					this.editorCtx.format('backgroundColor', '#00aaff')
				} else if (!this.blueback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Orangeback() { //橙色字体
				this.orangeback = !this.orangeback
				if (this.orangeback) {
					this.editorCtx.format('backgroundColor', 'orange')
				} else if (!this.orangeback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Greenback() { //绿色背景
				this.greenback = !this.greenback
				if (this.greenback) {
					this.editorCtx.format('backgroundColor', 'green')
				} else if (!this.greenback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			selected() { //选中内容
				this.editorCtx.getSelectionText()
			},
			insertImg() { //插入图片
				uni.chooseImage({
					success: res => {
						uni.showLoading({
							title: 'loading...'
						})
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.editorCtx.insertImage({
								src: res.tempFilePaths[i], //图片路径
							})
						}
						uni.hideLoading()
					}
				})
			},
			insertVideo() { //视频
				let that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.src = res.tempFilePath;
					}
				});
			},
			// 获取编辑器内容 
			getCtx() {
				var that = this
				that.editorCtx.getContents({
					success: function(data) {
						console.log(data)
					}
				})
			},



		}
	}
</script>

<style>
	/* 样式二 */
	.tabName {
		width: 750upx;
		height: 60upx;
		line-height: 60upx;
		padding: 15upx 0;
		display: flex;
		justify-content: space-around;
		border-top: 1upx solid #d9e4f9;
		border-bottom: 1upx solid #d9e4f9;

	}

	.tabName>image {
		width: 50upx;
		height: 50upx;
	}


	/* 内容高度根据需求自定义 */
	.tab_card {
		width: 750upx;
		height: 430upx;
		/* 	margin-top: 10upx; */
		background-color: #ffffff;
		text-align: center;
		line-height: 430upx;
		padding: 5upx 0;

	}

	.tab_card>.one {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.one>.oneitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}

	.tab_card>.one>.oneitem>image {
		width: 50upx;
		height: 50upx;

		margin-top: 5upx;
	}
	
	
	/* 行高 */
	.tab_card>.two {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;

		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}
	.tab_card >.two >.twoitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}
	.tab_card >.two >.twoitem >image {
		width: 50upx;
		height: 50upx;
		margin-top: 5upx;
	}
	.tab_card >.two >.twoitem >text {
		width: 50upx;
		height: 50upx;
		color: #899cba;
		font-size: 32upx;
	}

	/* 字号 */
	.tab_card>.three {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.three>.threeitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}

	/* 字体颜色 */
	.tab_card>.four {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.four>.fouritema {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/*  border: 4upx solid black; */
	}

	.tab_card>.four>.fouritema>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: black;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemb {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid red; */
	}

	.tab_card>.four>.fouritemb>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: red;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemc {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid #92a5c7; */
	}

	.tab_card>.four>.fouritemc>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #92a5c7;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemd {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid #00aaff; */
	}

	.tab_card>.four>.fouritemd>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #00aaff;
		border-radius: 50%;
	}

	.tab_card>.four>.fouriteme {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid orange; */
	}

	.tab_card>.four>.fouriteme>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: orange;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemf {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid green; */
	}

	.tab_card>.four>.fouritemf>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: green;
		border-radius: 50%;
	}


	/* 对齐方式 背景颜色*/
	.tab_card>.fours {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.fours>.foursitema {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/*  border: 4upx solid black; */
	}

	.tab_card>.fours>.foursitema>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: black;
	}

	.tab_card>.fours>.foursitemb {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid red; */
	}

	.tab_card>.fours>.foursitemb>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: red;
	}

	.tab_card>.fours>.foursitemc {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid #92a5c7; */
	}

	.tab_card>.fours>.foursitemc>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #92a5c7;
	}

	.tab_card>.fours>.foursitemd {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid #00aaff; */
	}

	.tab_card>.fours>.foursitemd>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #00aaff;
	}

	.tab_card>.fours>.foursiteme {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 50%; */
		/* border: 4upx solid orange; */
	}

	.tab_card>.fours>.foursiteme>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: orange;
	}

	.tab_card>.fours>.foursitemf {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid green; */
	}

	.tab_card>.fours>.foursitemf>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: green;
	}




	/* 图片选项卡 */
	.tab_cardimg {
		width: 750upx;
		height: 430upx;
	}

	.tab_cardimg>.mo {
		width: 750upx;
		height: 200upx;
		display: flex;
	}

	.tab_cardimg>.mo>.moitem {
		width: 140upx;
		height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-left: 40upx;
		margin-top: 30upx;
	}

	.tab_cardimg>.mo>.moitem>image {
		width: 80upx;
		height: 80upx;
	}

	.tab_cardimg>.mo>.moitem>text {
		width: 120upx;
		height: 40upx;
		margin-top: 10upx;
		color: #92a5c7;
		font-size: 24upx;
		text-align: center;
	}


	/*  */
	.main {
		width: 100%;
		min-height: 820upx;
		max-height: max-content;
		/* height: max-content; */
	}

	.myEditor {
		min-height: 820upx;
		max-height: max-content;
		/* height: max-content; */
		padding: 0 20upx;
		font-size: 36upx;
	}
</style>